<template>
	<view class="content">
		<nav-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">登录</block>
		</nav-custom>
		<view class="header">
			<image src="../../static/img/utils/login.png"></image>
		</view>

		<view class="list">
			<view class="list-call">
				<view class="iconfont icon-shoujihao"></view>
				<input class="biaoti" v-model="phoneno" type="number" maxlength="11" placeholder="手机号" />
			</view>
			<view class="list-call">
				<view class="iconfont icon-yanzhengma"></view>
				<input class="biaoti" v-model="code" type="number" maxlength="6" placeholder="验证码" />
				<view class="yzm" :class="{ yzms: second > 0 }" @tap="getcode">{{ yanzhengma }}</view>
			</view>
		</view>

		<view class="dlbutton" hover-class="dlbutton-hover" @tap="bindLogin"><text>注册</text></view>

		<view class="xieyi">
			<text @tap="xieyitong">登录即表示您同意</text>
			<navigator url="pact" open-type="navigate">《用户协议》</navigator>
		</view>
		<u-loading :visible="loading"></u-loading>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	let js;
	export default {
		onLoad() {},
		onUnload() {
			clearInterval(js);
			this.second = 0;
		},
		data() {
			return {
				loading: false,
				phoneno: '',
				code: '',
				second: 0
			};
		},
		computed: {
			yanzhengma() {
				if (this.second == 0) {
					return '获取验证码';
				} else {
					if (this.second < 10) {
						return '重新获取0' + this.second;
					} else {
						return '重新获取' + this.second;
					}
				}
			}
		},
		methods: {
			...mapMutations(['login']),
			getcode() {
				if (this.phoneno.length != 11) {
					uni.showToast({
						icon: 'none',
						title: '手机号不正确'
					});
					return;
				}
				if (this.second > 0) {
					return;
				}
				this.loading = true;
				this.$api.SendCode(this.phoneno).then(res => {
					this.loading = false;
					uni.showToast({
						title: res.msg
					});
					this.second = 60;
					js = setInterval(() => {
						this.second--;
						if (this.second == 0) {
							clearInterval(js);
						}
					}, 1000);
				});
			},
			bindLogin() {
				if (!(/^1[0-9]{10}$/.test(this.phoneno))) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					});
					return
				}
				if (this.code.length != 6) {
					uni.showToast({
						icon: 'none',
						title: '验证码不正确'
					});
					return;
				}
				this.loading = true;
				this.$api.Login(this.phoneno, this.code).then(res => {
					this.login(res.data);
					this.$store.state.token = res.data.token;
					setTimeout(() => {
						uni.showToast({
							icon: 'none',
							title: '登录成功'
						});
						uni.navigateBack();
					}, 1000)
				});
			}
		}
	};
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.header {
		width: 321upx;
		height: 321upx;
		box-shadow: 0upx 12upx 13upx 0upx var(--pink);
		border-radius: 50%;
		margin-top: 160upx;
		margin-left: auto;
		margin-right: auto;
	}

	.header image {
		width: 321upx;
		height: 321upx;
		border-radius: 50%;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50upx;
		padding-left: 70upx;
		padding-right: 70upx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100upx;
		color: #333333;
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
	}

	.list-call .iconfont {
		font-size: 40upx;
	}

	.list-call .biaoti {
		flex: 1;
		text-align: left;
		font-size: 32upx;
		line-height: 100upx;
		margin-left: 16upx;
	}

	.yzm {
		color: var(--pink);
		font-size: 24upx;
		line-height: 64upx;
		padding-left: 10upx;
		padding-right: 10upx;
		width: auto;
		height: 64upx;
		border: 1upx solid var(--pink);
		border-radius: 10upx;
	}

	.yzms {
		color: var(--blue) !important;
		border: 1upx solid var(--blue);
	}

	.dlbutton {
		color: #ffffff;
		font-size: 34upx;
		width: 470upx;
		height: 100upx;
		background: linear-gradient(-90deg, var(--pink), var(--orange));
		box-shadow: 0upx 0upx 13upx 0upx rgba(164, 217, 228, 0.2);
		border-radius: 50upx;
		line-height: 100upx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100upx;
	}

	.dlbutton-hover {
		background: var(--pink);
	}

	.xieyi {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30upx;
		margin-top: 80upx;
		text-align: center;
		height: 40upx;
		line-height: 40upx;
	}

	.xieyi navigator {
		color: var(--pink);
		text-decoration: underline;
	}
</style>
